/* eslint-disable react/no-unused-state */
/* eslint-disable react/no-unescaped-entities */
/* eslint-disable @typescript-eslint/no-useless-constructor */
// import ETemplateModuleLayoutType from "@/enum/renderTemplate"
// 在线咨询跳转pageMap
import { pageMapper } from "@/constants/pageMap"
// 引入接口api
import { getInstitutionDetail, getOrganizationDetail } from "@/apis/index"
import Taro from "@tarojs/taro"
import React from "react"
import { cloneDeep, setPageMeta } from "@/utils/common"
import { navigation } from "@/utils/router"
// 引入合并样式的插件
import clsx from "clsx"
// 引入气泡组件
import { Popup } from "@taroify/core"
import { Cross } from "@taroify/icons"
import { View, Text, Image, Video, ScrollView, /** Map, */ RichText } from "@tarojs/components"
// tabbar
import GpTabbar from "@/components/GpTabbar"
import GpContainer from "@/components/GpContainer"
import GpRate from "@/components/GpRate"
import GpIcon from "@/components/GpFontIcon"
import GpCurrentPort from "@/components/GpCurrentPort"
// 样式文件
import styles from "./index.module.scss"
import "./index.scss"
import { MapProps } from "@tarojs/components/types/Map"
import GpJumpNavs from "@/components/GpJumpNavs"

/** 当前所在页面 */
const ports = [{ text: "机构详情" }]
const markersData: MapProps["markers"] = [
  {
    id: 1,
    latitude: 40.048828,
    longitude: 116.280412,
    width: 10,
    height: 10,
    enableZoom: true,
    enableScroll: true,
    // 设置iconPath为空百度小程序出不来
    // iconPath: "",
    callout: {
      content: "",
      color: "#2C2C35",
      fontSize: 14,
      borderWidth: 0,
      borderRadius: 15,
      borderColor: "#ffffff",
      bgColor: "#ffffff",
      padding: 8,
      display: "ALWAYS",
      textAlign: "center"
    }
  }
]

enum ETemplateModuleLayoutType {
  /** 基础版式 */
  basisFormat = 0,
  /** 配图版式 */
  pictureFormat = 10,
  /** 配图版式_多图 */
  morePictureFormat = 11,
  /** 视频版式 */
  videoFormat = 20,
  /** 相册版式 */
  albumFormat = 30,
  /** 图标版式 */
  iconFormat = 40,
  /** 团队版式 */
  teamFormat = 50,
  /** 优势版式 */
  advantageFormat = 51,
  /** 学员风采版式 */
  studentFormat = 52,
  /** 学校师资 */
  campusQualification = 53
}

interface ProjectItem {
  /** id */
  id: number
  /** 介绍 */
  introduce: string
  /** 专业名 */
  name: string
  /** 图片地址 */
  picture: string
}

interface ILocation {
  /** 详细地址 */
  address?: string
  /** 纬度 */
  lat: number
  /** 经度 */
  lng: number
  /** 校区名称 */
  name?: string
}

interface IState {
  /** 新的基本详情 */
  newDetail?: INewDetail
  /** 基本详情 */
  detail: IDetail | undefined
  /** 学员点评 */
  comments: IComment[]
  /** 评论区气泡层的显示隐藏 */
  commentPannelVisible: boolean
  /** 校区地址 */
  campusLocationVisible: boolean
  /** 视频播放按钮 */
  playVideo: boolean
  /** 当前选择的index */
  projectInterprets: ProjectItem[]
  /** 来源id */
  sourceId: number | undefined
  // ------------------------------------
  markers?: MapProps["markers"]
  htmlContentHeight: number
  showAllHtmlContent: boolean
  /** 机构位置 */
  address: string
  /** 经纬度 */
  longitude: number
  latitude: number
  /** 机构位置 */
  teachs: ILocation[]
  /** 当前选中的机构名 */
  curSelectIns: string
  /** 当前选中的机构详细地址 */
  curSelectDetailLocation: ILocation | undefined

  // ---------------------
  /** 显示地图 */
  showMap: boolean
  /** 模块详情显示 */
  moduleDetailVisible: boolean
  /** 详情数据 */
  moduleDatas: any
}

/** 评论参数 */
interface IComment {
  /** 头像 */
  avatar: string
  /** 评论内容 */
  content: string
  envScore?: string | number
  /** 评论图片 无须渲染 */
  images?: any[] | null
  /** 姓名 */
  name: string
  /** 分数 */
  score: number
  /** 教学服务评分 无须渲染 */
  teachServiceScore?: string
  /** 教师评分 无须渲染 */
  teachersScore?: string
  /** 日期 */
  time: string
}

type INewDetail = {
  /** 视频地址 */
  video?: string
  /** 模块参数 */
  moduleDatas?: IApiRelative.IGetOrganizationDetail.ModuleData[]
}

type IDetail = {
  id: number
  /** 校名 */
  name: string
  /** 试听人数 */
  views: number
  /** 评论列表 */
  comment?: IComment[]
  /** 学校介绍 */
  introduce: string
  /** 分数 评分 */
  rate: number
  /** 标签 */
  tags: string[]
  /** 横幅图片 */
  banner: string
}

type IData = {
  /** 接口调用成功返回的回调函数 complete fail success */
  /** MapContext 实例，可通过 Taro.createMapContext 获取。 MapContext 通过 id 跟一个 map 组件绑定，操作对应的 map 组件。 */
  mapCtx: Taro.MapContext | null
  /** 点击的机构id */
  id: string
  /** 开设课程 */
  courses: any[]
  /** 机构位置 */
  teachs: ILocation[]
}

class InstitutionDetail extends React.Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      newDetail: undefined,
      detail: undefined,
      comments: [],
      address: "",
      // 评论弹层的显示隐藏变量
      commentPannelVisible: false,
      /** 校区地址 */
      campusLocationVisible: false,
      // 视频播放的变量
      playVideo: false,
      /** 开设专业 */
      projectInterprets: [],
      /** 来源id */
      sourceId: undefined,
      /** 经纬度 */
      longitude: 0,
      latitude: 0,
      /** 机构位置 */
      teachs: [],
      htmlContentHeight: 0,
      showAllHtmlContent: false,
      markers: cloneDeep(markersData),
      /** 当前选中的机构 */
      curSelectIns: "",
      /** 当前选中的机构详细地址 */
      curSelectDetailLocation: undefined,
      /** 控制地图的显示隐藏 */
      showMap: false,
      /** 模块详情弹窗 */
      moduleDetailVisible: false,
      /** 详情数据 */
      moduleDatas: undefined
    }
  }

  /** 获取地图组件实例 */
  mapContext = React.createRef()

  // 定义接收返回的数据参数
  exData: IData = {
    mapCtx: null,
    id: "",
    courses: [],
    teachs: []
  }

  // 设置页面信息
  setPageInfo = (detail: INullable<IDetail>) => {
    if (detail) {
      setPageMeta({
        keywords: `${detail.name}`,
        title: `${detail.name}怎么样-择艺宝`,
        description: `${detail.name}怎么样，好不好，择艺宝帮助你从简介、优势、师资、收费、环境、口碑等多维度分析，让你快速了解${detail.name}`
      })
    }
  }

  // onLoad函数
  onLoad({ id }) {
    this.exData.id = id
    // console.log(25, id)
    this.getOrganizationDetail(id)
  }

  // 获取新机构详情数据
  getOrganizationDetail = async (id: number) => {
    // 显示加载
    Taro.showLoading()
    const res = await getOrganizationDetail(id)
    console.log(151, res)
    if (res.data.success) {
      const resData = res.data.data
      /** 视频 */
      const _video = resData.video
      /** 封面 */
      const _cover = resData.cover
      /** 板块参数 */
      const moduleDatas = resData.moduleDatas

      const newDetail = {
        video: _video,
        cover: _cover,
        moduleDatas
      }
      this.setState({
        newDetail
      })
    }
    // 关闭加载中
    Taro.hideLoading()
  }

  // 获取机构详情数据
  getInstitutionDetailData() {
    // 显示加载中
    Taro.showLoading()
    return new Promise(resolve => {
      getInstitutionDetail(this.exData.id)
        .then(res => {
          console.log(57, res)
          // 如果请求数据成功
          if (res.data.success) {
            const retData = res.data.data
            /** 评论列表 */
            const _comments = retData.comments || []
            /** 机构地理位置 */
            this.exData.teachs = retData.teachs || []
            const teachs = this.exData.teachs

            const shipState = {} as IState
            if (teachs.length > 0) {
              const firstItem = teachs[0]
              console.log("firstItem", firstItem)
              shipState.longitude = firstItem.lng
              shipState.latitude = firstItem.lat
              shipState.markers = cloneDeep(this.state.markers) as MapProps.marker[]
              shipState.markers[0].latitude = firstItem.lat
              shipState.markers[0].longitude = firstItem.lng
              if (shipState.markers[0].callout) {
                shipState.markers[0].callout.content = firstItem.name ? firstItem.name : ""
              }
              shipState.curSelectIns = firstItem.name ? firstItem.name : ""
            }
            // const address = this.exData.teachs[0]?.address
            let address: string
            if (this.exData.teachs) {
              address = this.exData.teachs[0].address ? this.exData.teachs[0].address : ""
            } else {
              return ""
            }
            /** 机构介绍 */
            const introduce = retData.introduce
            /** 机构试听人数 */
            const views = retData.views
            /** 开设专业 */
            const projectInterprets = retData.projectInterprets
            /** 机构来源id */
            const sourceId = retData.sourceId
            /** 横幅图片 */
            const banner = retData.banner

            const detail = {
              id: retData.id,
              name: retData.name,
              rate: retData.rate,
              tags: retData.tags,
              introduce,
              views,
              banner
            }
            this.setPageInfo(detail)
            this.setState(
              {
                detail,
                comments: _comments,
                projectInterprets,
                sourceId,
                /** 机构地址 */
                address,
                teachs,
                longitude: shipState.longitude || 0,
                latitude: shipState.latitude || 0,
                markers: shipState.markers,
                curSelectIns: shipState.curSelectIns
              },
              () => {
                resolve(null)
              }
            )
          }
        })
        .finally(() => {
          Taro.hideLoading()
        })
    })
  }

  onReady() {
    this.getInstitutionDetailData().then(() => {
      Taro.nextTick(() => {
        /** 地图挂载后定义一个map的实例 与map相关联 */
        this.exData.mapCtx = Taro.createMapContext("teachs-map")
      })
    })
  }

  /** 跳转在线咨询 */
  handleJumpConsult = () => {
    const { sourceId } = this.state
    console.log(386, sourceId)
    navigation(pageMapper.external, { type: 17, id: sourceId })
  }

  /** 打开校区地址弹层 */
  openCampus = () => {
    this.setState({
      campusLocationVisible: true,
      showMap: true
    })
  }

  /** 关闭校区地址弹层 */
  closeCampusPopup = () => {
    this.setState({
      showMap: false,
      campusLocationVisible: false
    })
  }

  /** 切换地址 */
  // handleChangeLocation = (item?: any) => {
  //   this.setState({
  //     curSelectDetailLocation: item
  //   })
  //   console.log("准备切换地址了!!", item)
  //   console.log("this.exData.mapCtx", this.exData.mapCtx)
  //   if (this.exData.mapCtx) {
  //     console.log("translateMarker")
  //     /** 获取到地图实例后，通过实例调用translateMarker方法 平移marker 带动画 */
  //     this.exData.mapCtx.translateMarker({
  //       /** 指定的marker的id */
  //       markerId: 1,
  //       destination: {
  //         /** 经度 */
  //         longitude: item.lng,
  //         /** 纬度 */
  //         latitude: item.lat
  //       },
  //       /** 移动过程中是否自动旋转 marker */
  //       autoRotate: false,
  //       /** marker的旋转角度 */
  //       rotate: 0,
  //       /** 成功失败都会经过complete函数 */
  //       complete: () => {
  //         console.log("handleChangeLocation", item, this.state.markers)
  //         /** 避免直接修改源数据 深度克隆一份marker数据 */
  //         const _markers = cloneDeep(this.state.markers)
  //         console.log(419, _markers)
  //         if (_markers) {
  //           _markers[0].latitude = item.lat
  //           _markers[0].longitude = item.lng
  //           if (_markers[0].callout) {
  //             _markers[0].callout.content = item.name
  //           }
  //           this.setState({
  //             markers: _markers,
  //             curSelectIns: item.name,
  //             longitude: item.lng,
  //             latitude: item.lat
  //           })
  //         }
  //       },
  //       /** 失败的回调 */
  //       fail: res => {
  //         console.log("平移出错了!", res)
  //       },
  //       success: res => {
  //         console.log("平移成功了", res)
  //       }
  //     })
  //   }
  // }

  // 校区地址的气泡层

  renderCampusLocationPopup = () => {
    const { campusLocationVisible, longitude, latitude, markers, teachs, curSelectIns, showMap } =
      this.state
    console.log(393, teachs)
    console.log(394, curSelectIns)
    return (
      <Popup
        className={styles["comment_Pannel"]}
        placement="bottom"
        rounded
        style={{ height: "70%" }}
        open={campusLocationVisible}
        onClose={this.closeCampusPopup}
      >
        <View className="px-30px py-40px">
          <View className="flex flex-row justify-between mb-36px">
            <View className="font-normal text-28px inter text-hex-636363">校区地址</View>
            <Cross size="20" color="#636363" onClick={this.closeCampusPopup}></Cross>
          </View>
          {/* <View className="w-694px h-310px rounded-2xl">
            {showMap && (
              <Map
                id="teachs-map"
                scale={10}
                longitude={longitude}
                latitude={latitude}
                markers={markers as any}
                className={styles.newmap}
              ></Map>
            )}
          </View> */}
          {teachs && teachs.length > 0 && (
            <View>
              <ScrollView scrollY className="w-full h-full">
                {teachs.map((item, index) => {
                  return (
                    <View
                      className={styles["locaItem"]}
                      key={index}
                      style={index === teachs.length - 1 ? { border: "none" } : {}}
                      onClick={() => this.handleChangeLocation(item)}
                    >
                      <GpIcon
                        icon="icon-dingwei"
                        size={40}
                        color="#1a8cff"
                        className="mr-10px"
                      ></GpIcon>
                      <View className="flex flex-col justify-between flex-1 pb-36px pt-12px">
                        <View className="font-bold yahei text-32px text-hex-2c2c35 mb-15px">
                          {item.name}
                        </View>
                        <View className="yahei text-24px text-hex-636363">{item.address}</View>
                      </View>
                    </View>
                  )
                })}
              </ScrollView>
            </View>
          )}
        </View>
      </Popup>
    )
  }

  // 关闭评论气泡层
  closeCommentPopup = () => {
    this.setState({
      commentPannelVisible: false
    })
  }

  // 打开评论气泡层
  openCommentPopup = () => {
    this.setState({
      commentPannelVisible: true
    })
  }

  // 渲染评论区气泡层
  renderCommentPannel = () => {
    const { commentPannelVisible } = this.state
    const { comments } = this.state
    console.log(261, comments)
    return (
      <Popup
        className={styles["comment_Pannel"]}
        placement="bottom"
        rounded
        style={{ height: "70%" }}
        open={commentPannelVisible}
        onClose={this.closeCommentPopup}
      >
        <View className="px-30px py-40px">
          <View className="flex flex-row justify-between mb-36px">
            <View className="font-normal text-28px inter text-hex-636363">全部评论</View>
            <Cross size="20" color="#636363" onClick={this.closeCommentPopup}></Cross>
          </View>
          <View>
            <ScrollView scrollY className="">
              {/* 有图和没图 */}
              {comments &&
                comments.length > 0 &&
                comments.map((item, index) => {
                  return (
                    <View
                      className={styles["comment-items"]}
                      key={index}
                      style={index === comments.length - 1 ? { border: "none" } : {}}
                    >
                      <View className="flex flex-row justify-between">
                        {/* 头像 */}
                        <View className="flex flex-row items-center mb-12px">
                          <Image
                            src={item.avatar}
                            mode="aspectFill"
                            className="w-56px h-56px rounded-1 mr-20px"
                          ></Image>
                          <View>
                            <View className="yahei-bold text-28px text-hex-2c2c35">
                              {item.name}
                            </View>
                            <GpRate showRateText={false} rate={item.score}></GpRate>
                          </View>
                        </View>
                        <View>
                          <View className="text-20px text-hex-636363">
                            {item.time.split("-").join(".")}
                          </View>
                        </View>
                      </View>
                      <View className="leading-5 yahei text-24px text-hex-636363 mb-20px">
                        <Text>{item.content}</Text>
                      </View>
                      {item.images && (
                        <View className="w-full flex flex-row justify-start flex-wrap gap-20px">
                          {item.images.map((v, i) => {
                            return (
                              <Image
                                src={v}
                                mode="aspectFill"
                                className="w-160px h-160px rounded-xl"
                                key={i}
                              ></Image>
                            )
                          })}
                        </View>
                      )}
                    </View>
                  )
                })}
            </ScrollView>
          </View>
        </View>
      </Popup>
    )
  }

  // 渲染学校详情
  renderDetail = () => {
    const detail = this.state.detail as IDetail
    console.log(171, detail)

    return (
      detail && (
        <View className={styles["detail-layout"]}>
          <View className={styles["wrap"]}>
            <View className="font-bold yahei-bold text-44px text-hex-2c2c35 mb-20px">
              <Text>{detail.name}</Text>
            </View>
            {/* 学院分数 */}
            <View className={styles["middlePart"]}>
              <View className={styles["left-rate"]}>
                <Text className="font-bold yahei-bold text-40px text-hex-FE5900 mr-8px">
                  {detail.rate.toFixed(1)}
                </Text>
                <Text className="yahei-bold text-24px text-hex-FE5900 mr-2px">优质</Text>
                {detail && detail.rate && (
                  <GpRate
                    rate={detail.rate}
                    showRateText={false}
                    className={styles["rate-wrap"]}
                    rateClassName={styles["rate"]}
                  />
                )}
              </View>
              <View className="yahei-bold text-24px text-hex-999">{detail.views}人感兴趣</View>
            </View>
            <View
              className={clsx(
                "yahei-bold text-24px text-hex-636363 mb-16px",
                styles["overLineHidden"]
              )}
            >
              <Text>{detail.introduce}</Text>
            </View>

            {detail.tags && detail.tags.length > 0 && (
              <View className={styles["descTag"]}>
                {detail.tags.map((item, index) => {
                  if (index === 0) {
                    return <Text className={styles["first-tag"]}>{item}</Text>
                  } else {
                    return <Text className={styles["another-tags"]}>{item}</Text>
                  }
                })}
              </View>
            )}
          </View>
        </View>
      )
    )
  }

  // 渲染学校地址
  renderSchoolLocation = () => {
    const { address, curSelectDetailLocation } = this.state
    console.log(666, address)
    console.log(675, curSelectDetailLocation)

    return (
      <View className={styles["school-location"]}>
        <View className="flex flex-row items-center justify-between" onClick={this.openCampus}>
          <View className="flex flex-row justify-between">
            {/* 地址小图标 */}
            <GpIcon icon="icon-dingwei" size={40} color="#1a8cfe" className="mr-14px"></GpIcon>
            {/* 地址信息 */}
            <View>
              <Text className="yahei-bold text-26px text-hex-2C2C35">
                {curSelectDetailLocation ? curSelectDetailLocation.address : address}
              </Text>
              {/* <View className="yahei-bold text-24px text-hex-636363 mt-14px mb-30px">
                  直线距离您12.3km
                </View> */}
            </View>
          </View>
          <View>
            <Image
              src="/images/agencyDetail/arrow.png"
              mode="widthFix"
              className="w-32px h-32px"
            ></Image>
          </View>
        </View>
      </View>
    )
  }

  // 渲染开设专业
  renderCourseChoice = () => {
    const { projectInterprets } = this.state
    console.log(446, projectInterprets)
    return (
      <View
        className={styles["wrap-layout-subject"]}
        style={{ background: "linear-gradient(180deg, #fafafdff 0%, #ffffffff 100%)" }}
      >
        <View className="flex flex-row items-center">
          <Image
            src="/images/agencyDetail/triangle.png"
            mode="widthFix"
            className="block w-20px h24px mr-10px"
          ></Image>
          <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">开设专业</Text>
        </View>
        <View className="mt-20px mb-20px text-24px text-hex-636363">
          <Text>高质量精选课型，让艺考变“易考”</Text>
        </View>
        {projectInterprets && projectInterprets.length > 0 && (
          <ScrollView scrollX className={styles["subject-scroll-wrap"]}>
            {projectInterprets.map((item, index) => {
              return (
                <View
                  className={styles["subject-items"]}
                  key={index}
                  onClick={this.handleJumpConsult}
                >
                  <View className="mx-auto my-0 w-262px h-366px">
                    <Image
                      src={item.picture}
                      mode="aspectFill"
                      className="w-full h-full rounded-12px"
                    ></Image>
                  </View>
                  <View className={styles["subjectBottomMask"]}>
                    <Text>{item.name}</Text>
                  </View>
                </View>
              )
            })}
          </ScrollView>
        )}
      </View>
    )
  }

  // 报课评价
  renderComment = () => {
    const { comments } = this.state
    console.log(317, comments)
    const commentsLen = comments.length > 0
    return (
      commentsLen && (
        <>
          <View
            style={{
              background: "linear-gradient(180deg, #fafafdff 0%, #ffffffff 100%)"
              // backgroundColor: "#ffffff"
            }}
          >
            <View className={styles["wrap-layout-comment"]}>
              <View className="flex flex-row items-center">
                <Image
                  src="/images/agencyDetail/triangle.png"
                  mode="widthFix"
                  className="block w-20px h24px mr-10px"
                ></Image>
                <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">报课评价</Text>
              </View>
              <View className="mt-20px mb-30px text-24px text-hex-636363">
                <Text>算法识别，为您展示真实评价</Text>
              </View>
            </View>
            <View className={styles["commentScroll-wrap-container"]}>
              <ScrollView scrollX className={styles["commentScroll-wrap"]}>
                {comments && commentsLen && (
                  <View className={styles["comment-wrap"]} onClick={this.openCommentPopup}>
                    {comments.map((item, index) => {
                      if (index === 0) {
                        return (
                          <View className={styles["first-comment-item"]}>
                            {/* 评论人信息 */}
                            <View className="flex flex-row justify-between">
                              {/* 头像 */}
                              <View className="flex flex-row items-center">
                                <Image
                                  src={item.avatar}
                                  mode="aspectFill"
                                  className="w-56px h-56px rounded-1 mr-20px"
                                ></Image>
                                <View>
                                  <View className="yahei-bold text-28px text-hex-2c2c35">
                                    {item.name}
                                  </View>
                                  <GpRate showRateText={false} rate={item.score}></GpRate>
                                </View>
                              </View>
                              <View>
                                <View className="text-20px text-hex-636363">
                                  {item.time.split("-").join(".")}
                                </View>
                              </View>
                            </View>
                            {/* 评论内容 */}
                            <View
                              className={clsx("text-24px text-hex-636363 leading-5", "ellipse_3")}
                            >
                              <Text userSelect={false}>{item.content}</Text>
                            </View>
                          </View>
                        )
                      } else if (index === 1) {
                        return (
                          <View className={styles["second-comment-item"]}>
                            {/* 评论人信息 */}
                            <View className="flex flex-row justify-between">
                              {/* 头像 */}
                              <View className="flex flex-row items-center">
                                <Image
                                  src={item.avatar}
                                  mode="aspectFill"
                                  className="w-56px h-56px rounded-1 mr-20px"
                                ></Image>
                                <View>
                                  <View className="yahei-bold text-28px text-hex-2c2c35">
                                    {item.name}
                                  </View>
                                  <GpRate showRateText={false} rate={item.score}></GpRate>
                                </View>
                              </View>
                              <View>
                                <View className="text-20px text-hex-636363">
                                  {item.time.split("-").join(".")}
                                </View>
                              </View>
                            </View>
                            {/* 评论内容 */}
                            <View
                              className={clsx("text-24px text-hex-636363 leading-5", "ellipse_3")}
                            >
                              <Text userSelect={false}>{item.content}</Text>
                            </View>
                          </View>
                        )
                      } else if (index === 2) {
                        return (
                          <View className={styles["third-comment-item"]}>
                            {/* 评论人信息 */}
                            <View className="flex flex-row justify-between">
                              {/* 头像 */}
                              <View className="flex flex-row items-center">
                                <Image
                                  src={item.avatar}
                                  mode="aspectFill"
                                  className="w-56px h-56px rounded-1 mr-20px"
                                ></Image>
                                <View>
                                  <View className="yahei-bold text-28px text-hex-2c2c35">
                                    {item.name}
                                  </View>
                                  <GpRate showRateText={false} rate={item.score}></GpRate>
                                </View>
                              </View>
                              <View>
                                <View className="text-20px text-hex-636363">
                                  {item.time.split("-").join(".")}
                                </View>
                              </View>
                            </View>
                            {/* 评论内容 */}
                            <View
                              className={clsx("text-24px text-hex-636363 leading-5", "ellipse_3")}
                            >
                              <Text userSelect={false}>{item.content}</Text>
                            </View>
                          </View>
                        )
                      } else if (index === 3) {
                        return (
                          <View className={styles["fourth-comment-item"]}>
                            {/* 评论人信息 */}
                            <View className="flex flex-row justify-between">
                              {/* 头像 */}
                              <View className="flex flex-row items-center">
                                <Image
                                  src={item.avatar}
                                  mode="aspectFill"
                                  className="w-56px h-56px rounded-1 mr-20px"
                                ></Image>
                                <View>
                                  <View className="yahei-bold text-28px text-hex-2c2c35">
                                    {item.name}
                                  </View>
                                  <GpRate showRateText={false} rate={item.score}></GpRate>
                                </View>
                              </View>
                              <View>
                                <View className="text-20px text-hex-636363">
                                  {item.time.split("-").join(".")}
                                </View>
                              </View>
                            </View>
                            {/* 评论内容 */}
                            <View
                              className={clsx("text-24px text-hex-636363 leading-5", "ellipse_3")}
                            >
                              <Text userSelect={false}>{item.content}</Text>
                            </View>
                          </View>
                        )
                      }
                    })}
                  </View>
                )}
              </ScrollView>
            </View>
          </View>
        </>
      )
    )
  }

  // 渲染在线答疑
  renderQuestionOL = () => {
    return (
      <View className={styles["wrap-layout"]} style={{ paddingBottom: 0 }}>
        <View className="flex flex-row items-center">
          <Image
            src="/images/agencyDetail/triangle.png"
            mode="widthFix"
            className="block w-20px h24px mr-10px"
          ></Image>
          <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">在线答疑</Text>
        </View>
        <View className="mt-20px mb-30px text-24px text-hex-636363">
          <Text>专业老师在线，实时为您解答艺考难题</Text>
        </View>
        <View className={styles["question-wrap"]}>
          <View className={styles["question-small-wrap"]}>
            {/* 左边的问题 */}
            <View>
              <View className="flex flex-row justify-start pb-42px">
                {/* 问题 */}
                <View className={clsx("yahei text-24px text-hex-fff", styles["askIcon-one"])}>
                  问
                </View>
                <View className="yahei text-24px text-hex-2c2c35">艺考培训费用大概多少钱？</View>
              </View>
              <View className="flex flex-row justify-start pb-42px">
                {/* 问题 */}
                <View className={clsx("yahei text-24px text-hex-fff", styles["askIcon-two"])}>
                  问
                </View>
                <View className="yahei text-24px text-hex-2c2c35">
                  艺考集训什么时候开始参加好？
                </View>
              </View>
              <View className="flex flex-row justify-start pb-42px">
                {/* 问题 */}
                <View className={clsx("yahei text-24px text-hex-fff", styles["askIcon-three"])}>
                  问
                </View>
                <View className="yahei text-24px text-hex-2c2c35">艺考培训课程是怎么安排的？</View>
              </View>
              <View className="flex flex-row justify-start">
                {/* 问题 */}
                <View className={clsx("yahei text-24px text-hex-fff", styles["askIcon-four"])}>
                  问
                </View>
                <View className="yahei text-24px text-hex-2c2c35">艺考培训一般要多少天？</View>
              </View>
            </View>
            {/* 右边的客服头像和去咨询按钮 */}
            <View>
              <View className={styles["customerServiceAvatar"]}>
                <Image
                  src="https://static.91goodschool.com/UpFiles/public/yikao/image/kefu.png"
                  mode="widthFix"
                  className="w-260px h-224px"
                ></Image>
              </View>
              <View className={styles["goConsult"]} onClick={this.handleJumpConsult}>
                去咨询
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }

  // 渲染模块弹窗详情

  // 渲染评论区气泡层
  renderModuleDetailPannel = () => {
    const { moduleDetailVisible, moduleDatas } = this.state
    const { comments } = this.state
    console.log(261, comments)
    return (
      <Popup
        className={styles["comment_Pannel"]}
        placement="bottom"
        rounded
        style={{ minHeight: "50%", maxHeight: "70%" }}
        open={moduleDetailVisible}
        onClose={this.closeModuleDetailPopup}
      >
        <View className="px-30px py-40px">
          <View className="flex flex-row justify-between mb-36px">
            <View className="font-normal text-28px inter text-hex-636363">详情</View>
            <Cross size="20" color="#636363" onClick={this.closeModuleDetailPopup}></Cross>
          </View>
          {moduleDatas ? (
            <View>
              <View className="flex justify-center w-auto">
                <Image
                  className="box-border w-750px max-h-330px rounded-t-2xl overflow-hidden"
                  src={moduleDatas.image ? moduleDatas.image : ""}
                  mode="aspectFit"
                />
              </View>
              {moduleDatas.title && (
                <View className="font-normal text-center yahei text-36px text-hex-2c2c35 mt-30px mb-30px">
                  <Text>{moduleDatas.title}</Text>
                </View>
              )}
              {moduleDatas.description && (
                <RichText
                  // @ts-ignore
                  nodes={moduleDatas.description.replaceAll("\n", "<br/>")}
                  className={`${styles["teachIntro"]}`}
                ></RichText>
              )}
              {moduleDatas.content && (
                <RichText
                  // @ts-ignore
                  nodes={moduleDatas.content.replaceAll("\n", "<br/>")}
                  className={`${styles["teachIntro"]}`}
                ></RichText>
              )}
              {moduleDatas.shortDescription1 && (
                <RichText
                  // @ts-ignore
                  nodes={moduleDatas.shortDescription1.replaceAll("\n", "<br/>")}
                  className={`${styles["teachIntro"]}`}
                ></RichText>
              )}
            </View>
          ) : (
            ""
          )}
        </View>
      </Popup>
    )
  }

  // 关闭评论气泡层
  closeModuleDetailPopup = () => {
    this.setState({
      moduleDetailVisible: false
    })
  }

  // 打开评论气泡层
  openModuleDetailPopup = (item: any) => {
    console.log("item", item)
    this.setState({
      moduleDetailVisible: true,
      moduleDatas: item
    })
  }

  // 渲染模块内容
  renderModules = () => {
    const newDetail = this.state.newDetail
    console.log(728, newDetail)
    const mm = this.state.newDetail
    console.log("moduleDatas", mm?.moduleDatas)
    return (
      mm?.moduleDatas &&
      mm?.moduleDatas.map((item, index) => {
        // 判断当item的datas和groups的数组长度为0的时候不渲染这个模块的内容 包括标题等
        return item.datas.length <= 0 && item.groups.length <= 0 ? null : (
          // <View
          //   className={clsx(styles["wrap-layout"])}
          //   style={{
          //     backgroundColor: index % 2 === 0 ? "#ffffff" : "#fafafd"
          //   }}
          //   key={item.id}
          // >

          // </View>
          <View
            className="py-50px px-30px"
            style={{
              backgroundColor: index % 2 === 0 ? "#ffffff" : "#fafafd"
            }}
          >
            <View className="flex flex-row items-center">
              <Image
                src="/images/agencyDetail/triangle.png"
                mode="widthFix"
                className="block w-20px h24px mr-10px"
              ></Image>
              <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">{item.name}</Text>
            </View>
            {/* 纯文本 */}
            {item.layoutType === ETemplateModuleLayoutType.basisFormat &&
              item.datas.map((a, b) => {
                return (
                  <>
                    {/* <View className="leading-5 mt-20px mb-30px text-24px text-hex-636363" key={b}>
                        {a.title && <Text>{a.title}</Text>}
                        {a.description && <Text>{a.description}</Text>}
                        {a.content && <Text>{a.content}</Text>}
                      </View> */}

                    {/* <View className="leading-5 mt-20px mb-10px yahei text-28px text-hex-666"></View> */}
                    {a.content && (
                      <RichText
                        nodes={a.content.replace(/\n/g, "<br/>")}
                        preview
                        className="leading-5 pt-20px yahei text-24px text-hex-636363 flex"
                      ></RichText>
                    )}
                    {/* <Text className="leading-5 mt-20px mb-10px yahei text-28px text-hex-666">
                      {a.content}
                    </Text> */}

                    {/* <View
                      className="leading-5 mt-20px mb-10px yahei text-28px text-hex-666"
                      dangerouslySetInnerHTML={{
                        // @ts-ignore
                        __html: a.content?.replaceAll("\n", "<br />").replaceAll("\r", "") || ""
                      }}
                    ></View> */}
                  </>
                )
              })}
            {/* 配图 */}
            {item.layoutType === ETemplateModuleLayoutType.pictureFormat &&
              item.datas.map((c, d) => {
                return (
                  <>
                    <View className="leading-5 mt-20px mb-30px text-24px text-hex-636363" key={d}>
                      {c.title && <Text>{c.title}</Text>}
                    </View>
                    {/* 校区照片 */}
                    <View className={styles["pictureFormat-module"]}>
                      <Image
                        src={c.image ? c.image : ""}
                        mode="aspectFill"
                        className="w-full h-full rounded-12px"
                      ></Image>
                    </View>
                    {/* 校区简介 */}
                    {c.content && (
                      <RichText
                        // @ts-ignore
                        nodes={c.content.replaceAll("\n", "<br/>")}
                        className="yahei text-28px text-hex-666"
                      ></RichText>
                    )}
                    {/* <Text className="yahei text-28px text-hex-666">{c.content}</Text> */}
                  </>
                )
              })}
            {/* 相册 */}
            {item.layoutType === ETemplateModuleLayoutType.albumFormat && (
              <>
                {item.datas.map((e, f) => {
                  return (
                    <View
                      className={clsx(
                        "mb-25px text-24px text-hex-636363 leading-5",
                        f === 0 ? "mt-20px" : ""
                      )}
                      key={f}
                    >
                      {e.title && <Text>{e.title}</Text>}
                      {e.description && (
                        // @ts-ignore
                        <RichText nodes={e.description.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {e.content && (
                        // @ts-ignore
                        <RichText nodes={e.content.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {/* {e.description && <Text>{e.description}</Text>}
                      {e.content && <Text>{e.content}</Text>} */}
                    </View>
                  )
                })}
                {item.groups.map((g, h) => {
                  return (
                    <View className="w-full h-348px" key={h}>
                      <ScrollView scrollX className={styles["album-scroll-wrap"]}>
                        {g.datas.map((i, j) => {
                          return (
                            <View className={styles["album-items"]} key={j}>
                              <View className="relative w-full h-full rounded-12px">
                                <Image
                                  className="w-full h-full rounded-12px"
                                  src={i.image ? i.image : ""}
                                  mode="aspectFill"
                                ></Image>
                                <View className={styles["studentBottomMask"]}>
                                  <Text>{i.title}</Text>
                                </View>
                              </View>
                            </View>
                          )
                        })}
                      </ScrollView>
                    </View>
                  )
                })}
              </>
            )}
            {/* 团队 */}
            {item.layoutType === ETemplateModuleLayoutType.teamFormat && (
              <>
                {item.datas.map((k, l) => {
                  return (
                    <View
                      className={clsx(
                        "text-24px text-hex-636363 leading-5",
                        l === item.datas.length - 1 ? "mb-30px" : "",
                        l === 0 ? "mt-20px" : ""
                      )}
                      key={l}
                    >
                      {k.title && <Text>{k.title}</Text>}
                      {k.description && (
                        // @ts-ignore
                        <RichText nodes={k.description.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {k.content && (
                        // @ts-ignore
                        <RichText nodes={k.content.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {/* {k.description && <Text>{k.description}</Text>}
                      {k.content && <Text>{k.content}</Text>} */}
                    </View>
                  )
                })}
                {item.groups.map((m, n) => {
                  return (
                    <View key={n}>
                      <ScrollView scrollX className={styles["teach-scroll"]}>
                        {m.datas.map((o, p) => {
                          return (
                            <View
                              className={styles["teach-item"]}
                              key={p}
                              onClick={() => this.openModuleDetailPopup(o)}
                            >
                              <View className="flex justify-center">
                                <Image
                                  className="box-border w-180px h-180px rounded-1 mt-48px"
                                  src={o.image ? o.image : ""}
                                  mode="aspectFill"
                                />
                              </View>
                              <View className="font-normal text-center yahei text-36px text-hex-2c2c35 mt-30px mb-30px">
                                <Text>{o.title}</Text>
                              </View>
                              {o.description && (
                                <RichText
                                  // @ts-ignore
                                  nodes={o.description.replaceAll("\n", "<br/>")}
                                  className={`${styles["teachIntro"]}`}
                                ></RichText>
                              )}
                            </View>
                          )
                        })}
                      </ScrollView>
                    </View>
                  )
                })}
              </>
            )}
            {/* 优势 */}
            {item.layoutType === ETemplateModuleLayoutType.advantageFormat && (
              <>
                {item.datas.map((q, r) => {
                  return (
                    <View
                      className={clsx("mt-20px text-24px text-hex-636363 leading-5", {
                        "mb-20px": r === item.datas.length - 1
                      })}
                      key={r}
                    >
                      {q.title && <Text>{q.title}</Text>}
                      {q.description && (
                        // @ts-ignore
                        <RichText nodes={q.description.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {q.content && (
                        // @ts-ignore
                        <RichText nodes={q.content.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {/* {q.description && <Text>{q.description}</Text>}
                      {q.content && <Text>{q.content}</Text>} */}
                    </View>
                  )
                })}
                {item.groups.map((s, t) => {
                  return (
                    <ScrollView scrollX className={styles["advantage-scroll-wrap"]} key={t}>
                      {s.datas.map((a, b) => {
                        return (
                          <View
                            className={styles["advan-Item"]}
                            key={b}
                            onClick={() => this.openModuleDetailPopup(a)}
                          >
                            <Image
                              className="block w-full rounded-bl-none rounded-br-none mb-20px h-260px rounded-12px"
                              src={a.image ? a.image : ""}
                              mode="aspectFill"
                            ></Image>
                            <View className="px-12px text-32px text-hex-2c2c35">{a.title}</View>
                            {a.content && (
                              <RichText
                                // @ts-ignore
                                nodes={a.content.replaceAll("\n", "<br/>")}
                                className={clsx(styles["advan-Item-text"])}
                              ></RichText>
                            )}
                            {/* <View className={clsx(styles["advan-Item-text"])}>{a.content}</View> */}
                          </View>
                        )
                      })}
                    </ScrollView>
                  )
                })}
              </>
            )}
            {/* 图标优势 */}
            {item.layoutType === ETemplateModuleLayoutType.iconFormat && (
              <>
                {item.datas.map((w, x) => {
                  return (
                    <View className="leading-5 mt-20px mb-30px text-24px text-hex-636363" key={x}>
                      {w.title && <Text>{w.title}</Text>}
                      {w.description && (
                        // @ts-ignore
                        <RichText nodes={w.description.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {w.content && (
                        // @ts-ignore
                        <RichText nodes={w.content.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {/* {w.description && <Text>{w.description}</Text>}
                      {w.content && <Text>{w.content}</Text>} */}
                    </View>
                  )
                })}
                {item.groups.map((y, z) => {
                  return (
                    <View key={z}>
                      {y.datas.map((a, b) => {
                        return (
                          <View
                            className={clsx("w-full h-auto", styles["icon-advanItem"])}
                            style={b === y.datas.length - 1 ? { marginBottom: 0 } : ""}
                            key={b}
                          >
                            <View className={styles["iconStyle"]}>
                              {a.image && (
                                <GpIcon
                                  icon={a.image?.split("@").join("")}
                                  size={96}
                                  color="#1A8CFF"
                                  className={styles["icon"]}
                                ></GpIcon>
                              )}
                            </View>
                            <View className="flex flex-col justify-center">
                              <View
                                className={clsx(
                                  "text-32px text-hex-2c2c35 yahei font-bold",
                                  "ellipse_3"
                                )}
                              >
                                {a.title}
                              </View>
                              {a.description && (
                                <RichText
                                  // @ts-ignore
                                  nodes={a.description.replaceAll("\n", "<br/>")}
                                  className="leading-5 mt-20px mb-10px yahei text-28px text-hex-666 line-clamp-3"
                                ></RichText>
                              )}
                              {a.shortDescription1 && (
                                <RichText
                                  // @ts-ignore
                                  nodes={a.shortDescription1.replaceAll("\n", "<br/>")}
                                  className="leading-5 mt-20px mb-10px yahei text-28px text-hex-666 line-clamp-3"
                                ></RichText>
                              )}
                              {/* {a.description && (
                                <View
                                  className={clsx(
                                    "text-24px text-hex-636363 leading-4",
                                    "ellipse_3"
                                  )}
                                >
                                  {a.description}
                                </View>
                              )}
                              {a.shortDescription1 && (
                                <View className="leading-4 text-24px text-hex-636363">
                                  {a.shortDescription1}
                                </View>
                              )} */}
                            </View>
                          </View>
                        )
                      })}
                    </View>
                  )
                })}
              </>
            )}
            {/* 学员风采 */}
            {item.layoutType === ETemplateModuleLayoutType.studentFormat && (
              <>
                {item.datas.map((a, b) => {
                  return (
                    <View className="leading-5 mt-20px mb-30px text-24px text-hex-636363" key={b}>
                      {a.title && <Text>{a.title}</Text>}
                      {a.description && (
                        // @ts-ignore
                        <RichText nodes={a.description.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {a.content && (
                        // @ts-ignore
                        <RichText nodes={a.content.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {/* {a.description && <Text>{a.description}</Text>}
                      {a.content && <Text>{a.content}</Text>} */}
                    </View>
                  )
                })}
                {item.groups.map((a, b) => {
                  return (
                    <View key={b}>
                      <ScrollView scrollX className={styles["student-scroll"]}>
                        {a.datas.map((c, d) => {
                          return (
                            <View
                              className={styles["student-items"]}
                              key={d}
                              onClick={() => this.openModuleDetailPopup(a)}
                            >
                              {/* 学员照片 */}
                              <View
                                className={clsx(
                                  "w-216px h-240px mr-24px rounded-12px",
                                  styles["studentAvatar"]
                                )}
                              >
                                <Image
                                  src={c.image ? c.image : ""}
                                  mode="aspectFill"
                                  className="w-216px h-240px rounded-12px"
                                ></Image>
                              </View>
                              {/* 学员介绍 */}
                              <View className="pt-46px">
                                <View className="flex flex-row items-center mb-16px">
                                  <Text className="text-32px text-hex-2c2c35 yahei mr-15px">
                                    {c.title.slice(0, 4)}
                                  </Text>
                                  <Text className="text-20px text-hex-636363 yahei">
                                    {c.description?.slice(0, 8)}
                                  </Text>
                                </View>
                                {c.shortDescription1 && (
                                  <RichText
                                    // @ts-ignore
                                    nodes={c.shortDescription1.replaceAll("\n", "<br/>")}
                                    className={styles["teachIntro"]}
                                  ></RichText>
                                )}
                              </View>
                            </View>
                          )
                        })}
                      </ScrollView>
                    </View>
                  )
                })}
              </>
            )}
            {/* 学校师资 */}
            {item.layoutType === ETemplateModuleLayoutType.campusQualification && (
              <>
                {item.datas.map((a, b) => {
                  return (
                    <View className="leading-5 mt-20px mb-30px text-24px text-hex-636363" key={b}>
                      {a.title && <Text>{a.title}</Text>}
                      {a.description && (
                        // @ts-ignore
                        <RichText nodes={a.description.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {a.content && (
                        // @ts-ignore
                        <RichText nodes={a.content.replaceAll("\n", "<br/>")}></RichText>
                      )}
                      {/* {a.description && <Text>{a.description}</Text>}
                      {a.content && <Text>{a.content}</Text>} */}
                    </View>
                  )
                })}
                {item.groups.map((c, d) => {
                  return (
                    <View className="w-full h-390px" key={d}>
                      <ScrollView scrollX className={styles["school-scroll-wrap"]}>
                        {c.datas.map((e, f) => {
                          return (
                            <View className={styles["school-enviro-pic-items"]} key={f}>
                              <Image
                                src={e.image ? e.image : ""}
                                mode="aspectFill"
                                className="w-full h-full rounded-12px"
                              ></Image>
                            </View>
                          )
                        })}
                      </ScrollView>
                    </View>
                  )
                })}
              </>
            )}
          </View>
        )
      })
    )
  }

  // 渲染教学优势
  renderTeachAdvantage = () => {
    const Item = [1, 2, 3]
    return (
      <>
        <View className={styles["wrap-layout-comment"]}>
          <View className="flex flex-row items-center">
            <Image
              src="/images/agencyDetail/triangle.png"
              mode="widthFix"
              className="block w-20px h24px mr-10px"
            ></Image>
            <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">教学优势</Text>
          </View>
          <View className="mt-20px mb-50px text-24px text-hex-636363">
            <Text>关于我们，更多品牌故事为您呈现</Text>
          </View>
        </View>
        <ScrollView scrollX className={styles["advantage-scroll-wrap"]}>
          {Item.map((item, index) => {
            return (
              <View className={styles["advan-Item"]} key={index}>
                <Image
                  className="block w-full rounded-bl-none rounded-br-none mb-20px h-260px rounded-12px"
                  src="/images/agencyDetail/03.jpeg"
                  mode="aspectFill"
                ></Image>
                <View className="px-24px text-32px text-hex-2c2c35">入学评估</View>
                <View className={styles["advan-Item-text"]}>
                  小班分层教学，针对复读特点，精准备考，高质高效，小班分层教学，针对复读特点，精准备考，高质高效。
                </View>
              </View>
            )
          })}
        </ScrollView>
      </>
    )
  }

  // 渲染名师团队
  renderFamousProfessorTeam = () => {
    return (
      <View className={styles["wrap-layout"]}>
        <View className="pt-60px mb-60px">
          <View className="flex flex-row items-center">
            <Image
              src="/images/agencyDetail/triangle.png"
              mode="widthFix"
              className="block w-20px h24px mr-10px"
            ></Image>
            <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">名师团队</Text>
          </View>
          <View className="mt-20px mb-50px text-24px text-hex-636363">
            <Text>师者，不失赤子之心，陪伴筑梦前行</Text>
          </View>
          {/* 横向滚动 */}
          <ScrollView scrollX className={styles["teach-scroll"]}>
            <View className={styles["teach-item"]}>
              <View className="flex justify-center">
                <Image
                  className="box-border w-180px h-180px rounded-1 mt-48px"
                  src="https://static.91goodschool.com/UpFiles/public/yikao/image/kefu.png"
                  mode="scaleToFill"
                />
              </View>
              <View className="font-normal text-center yahei text-36px text-hex-2c2c35 mt-30px mb-30px">
                <Text>吴泓泓</Text>
              </View>
              <View className={styles["teachIntro"]}>北京大学室内设计本科</View>
            </View>
            <View className={styles["teach-item"]}>
              <View className="flex justify-center">
                <Image
                  className="box-border w-180px h-180px rounded-1 mt-48px"
                  src="https://static.91goodschool.com/UpFiles/public/yikao/image/kefu.png"
                  mode="scaleToFill"
                />
              </View>
              <View className="font-normal text-center yahei text-36px text-hex-2c2c35 mt-30px mb-30px">
                <Text>吴泓泓</Text>
              </View>
              <View className={styles["teachIntro"]}>北京大学室内设计本科、伦敦大学</View>
            </View>
            <View className={styles["teach-item"]}>
              <View className="flex justify-center">
                <Image
                  className="box-border w-180px h-180px rounded-1 mt-48px"
                  src="https://static.91goodschool.com/UpFiles/public/yikao/image/kefu.png"
                  mode="scaleToFill"
                />
              </View>
              <View className="font-normal text-center yahei text-36px text-hex-2c2c35 mt-30px mb-30px">
                <Text>吴泓泓</Text>
              </View>
              <View className={styles["teachIntro"]}>
                北京大学室内设计本科、伦敦大学北京大学室内设计本科、伦敦大学北京大学室内设计本科、伦敦大学
              </View>
            </View>
          </ScrollView>
        </View>
      </View>
    )
  }

  // 渲染学员风采
  renderStudent = () => {
    return (
      <View className={styles["wrap-layout"]}>
        <View className="pt-50px pb-60px">
          <View className="flex flex-row items-center">
            <Image
              src="/images/agencyDetail/triangle.png"
              mode="widthFix"
              className="block w-20px h24px mr-10px"
            ></Image>
            <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">学员风采</Text>
          </View>
          <View className="mt-20px mb-50px text-24px text-hex-636363">
            <Text>逐梦艺考，梦想从这里启航</Text>
          </View>
          <View>
            <ScrollView scrollX className={styles["student-scroll"]}>
              <View className={styles["student-items"]}>
                {/* 学员照片 */}
                <View className={clsx("w-216px h-240px mr-24px pt-10px", styles["studentAvatar"])}>
                  <Image
                    src="/images/index/jgpm-icon.png"
                    mode="aspectFill"
                    className="w-full h-full"
                  ></Image>
                </View>
                {/* 学员介绍 */}
                <View className="pt-46px">
                  <View className="flex flex-row items-center mb-16px">
                    <Text className="text-32px text-hex-2c2c35 yahei mr-15px">周丹丹</Text>
                    <Text className="text-20px text-hex-636363 yahei">中国传媒大学</Text>
                  </View>
                  <View className={styles["student-intro"]}>
                    参加了2年艺考，最终以为552分并获得全省第六名的好成绩，成功考入中国传媒大学。
                  </View>
                </View>
              </View>
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }

  // 渲染学校相册
  renderSchoolAlbum = () => {
    return (
      <View className={styles["wrap-layout"]}>
        <View className="pt-60px pb-60px">
          <View className="flex flex-row items-center">
            <Image
              src="/images/agencyDetail/triangle.png"
              mode="widthFix"
              className="block w-20px h24px mr-10px"
            ></Image>
            <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">学校相册</Text>
          </View>
          <View className="mt-20px mb-40px text-24px text-hex-636363">
            <Text>逐梦艺考，梦想从这里启航</Text>
          </View>
          <View className="w-full h-306px">
            <ScrollView scrollX className={styles["album-scroll-wrap"]}>
              <View className={styles["album-items"]}>
                <View className="relative w-full h-full">
                  <Image className="w-full h-full" src="" mode="aspectFill"></Image>
                  <View className={styles["studentBottomMask"]}>
                    <Text>123123</Text>
                  </View>
                </View>
              </View>
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }

  // 渲染学校资质
  renderSchoolFlair = () => {
    return (
      <View className={styles["wrap-layout"]}>
        <View className="pt-50px pb-58px">
          <View className="flex flex-row items-center">
            <Image
              src="/images/agencyDetail/triangle.png"
              mode="widthFix"
              className="block w-20px h24px mr-10px"
            ></Image>
            <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">学校资质</Text>
          </View>
          <View className="mt-20px mb-40px text-24px text-hex-636363">
            <Text>正规学校，品质认证，工商信息透明，为您择校提供保障</Text>
          </View>
          <View className="w-full h-360px">
            <ScrollView scrollX className={styles["school-scroll-wrap"]}>
              <View className={styles["school-enviro-pic-items"]}>
                <Image src="" mode="aspectFill" className="w-full h-full"></Image>
              </View>
              <View className={styles["school-enviro-pic-items"]}>
                <Image src="" mode="aspectFill" className="w-full h-full"></Image>
              </View>
              <View className={styles["school-enviro-pic-items"]}>
                <Image src="" mode="aspectFill" className="w-full h-full"></Image>
              </View>
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }

  // 渲染快捷导航
  renderJumpNavs = () => {
    return (
      <>
        <View className={styles["jumpNav-layout"]}>
          <View className="flex flex-row items-center">
            <Image
              src="/images/agencyDetail/triangle.png"
              mode="widthFix"
              className="block w-20px h-24px mr-10px"
            ></Image>
            <Text className="font-bold yahei-bold text-36px text-hex-2c2c35">快捷导航</Text>
          </View>
        </View>
        <GpJumpNavs></GpJumpNavs>
      </>
    )
  }

  // 视频出错
  handleError = () => {
    Taro.showToast({
      title: "视频出错",
      icon: "none"
    })
  }

  // 视频结束触发
  handleEnded = () => {
    console.log("视频结束了!!")
    this.setState({
      playVideo: false
    })
  }

  // 控制播放视频
  handlePlay = (e: any) => {
    this.setState({
      playVideo: true
    })
  }
  // 渲染视频
  renderVideo = () => {
    const detail = this.state.detail
    const newDetail = this.state.newDetail
    console.log(1046, newDetail)
    const { playVideo } = this.state
    return (
      newDetail && (
        <View className="w-full h-400px">
          {playVideo ? (
            <View className="w-full h-full">
              {newDetail.video && (
                <Video
                  src={newDetail.video}
                  controls
                  autoplay
                  onError={this.handleError}
                  onEnded={this.handleEnded}
                  className="w-full h-full"
                ></Video>
              )}
            </View>
          ) : (
            detail && (
              <View className={styles["image_wrap"]}>
                {detail.banner && (
                  <Image src={detail.banner} mode="aspectFill" className="w-full h-full"></Image>
                )}
                {newDetail.video && (
                  <View className={styles["playIcon"]} onClick={this.handlePlay}></View>
                )}
              </View>
            )
          )}
        </View>
      )
    )
  }

  render(): React.ReactNode {
    const { sourceId } = this.state
    return (
      <GpContainer className="institution-detail">
        {/* 评论区气泡层 */}
        {this.renderCommentPannel()}
        {this.renderCampusLocationPopup()}
        {this.renderModuleDetailPannel()}
        <View className="h-full institution-item">
          {/* 顶部视频板块 */}
          {this.renderVideo()}
          {/* 学校详情板块 */}
          {this.renderDetail()}
          {/* 学校地址板块 */}
          {this.renderSchoolLocation()}
          {/* 课程精选板块 */}
          {this.renderCourseChoice()}
          {/* 报课评价 */}
          {this.renderComment()}
          {/* 在线答疑 */}
          {this.renderQuestionOL()}
          {/* 学校简介 */}
          {this.renderModules()}
          {/* 教学优势 */}
          {/* {this.renderTeachAdvantage()} */}
          {/* 名师团队 */}
          {/* {this.renderFamousProfessorTeam()} */}
          {/* 学员风采 */}
          {/* {this.renderStudent()} */}
          {/* 学校相册 */}
          {/* {this.renderSchoolAlbum()} */}
          {/* 学校资质 */}
          {/* {this.renderSchoolFlair()} */}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          <GpCurrentPort ports={ports}></GpCurrentPort>
        </View>
        <GpTabbar type={17} id={sourceId} preserve></GpTabbar>
      </GpContainer>
    )
  }
}

export default InstitutionDetail
